<template>
	<view>
		<view class="title">选择海报模板</view>
		<view class="contents-hb">
			<template v-for="it in list" v-if="it.img">
				<!-- <image src="a" mode="aspectFit"></image> -->
				<view class="contents-hb-list"  v-if="it.img">
					<u--image width="320rpx" height="none" :src="it.img" mode="widthFix" :lazy-load="true" @click="toPage(it)"></u--image>
					<image :src="ossUrl + `/static/image/vip/5.png`" mode="widthFix" class="contents-hb-list-img" v-if="it.vip_status === 1"></image>
				<image :src="ossUrl + `/static/image/vip/6.png`" class="contents-hb-list-img" mode="widthFix"
					v-if="it.user_id"></image>	
				
				</view>
				
			</template>
		</view>
		<u-gap :height="30"></u-gap>
		<!-- 会员弹窗 -->
		<MemberPopupVue ref="MemberPopupVueRef" @reload="reload"/>
	</view>
</template>

<script>
	import {
		InformationPosterTemplate,
		InformationBusinessCard,
		InformationUserInfo
	} from '@/common/http/api.js'
	import MemberPopupVue from '@/components/memberPopup/memberPopup.vue'
	export default {
		components: {
			MemberPopupVue
		},
		data() {
			return {
				//分页
				params:{
					page: 1, 
					circle_id: ''
				},
				isList: true,
				list: [],
				scrollTop:0,
				userInfo: {}
			};
		},
		onLoad() {
			uni.showLoading()
			InformationBusinessCard().then(res=>{
				this.params.circle_id = res.data.circle_id
				this.init()
			})
			this.reload()
			
		},
		onPageScroll({scrollTop}) {
		    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		    this.scrollTop = scrollTop;
		},
		onReachBottom() {
			if(this.isList){
				this.params.page ++
				this.init()
			}
		},
		methods:{
			reload(){
				InformationUserInfo().then(res=>{
					this.userInfo = res.data
				})
			},
			init(){
				uni.showLoading()
				InformationPosterTemplate(this.params).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length > 0) {
						if(this.params.page === 1) {
							this.list = res.data
						} else {
							this.list = this.list.concat(res.data)
						}
					} else {
						this.isList = false
					}
				})
			},
			
			toPage(it){
				if(it.vip_status == 1 && this.userInfo.vip === 0) {
					this.$refs.MemberPopupVueRef.show()
					return
				}
				uni.redirectTo({
					url:'/pagesA/posterDesign/add?id=' + it.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents-hb {
		width: 690rpx;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 17rpx;
		image {
			width: 320rpx;
			//margin-bottom: 17rpx;
		}
		&>view {
			width: 320rpx;
		}
		
	}
	
	.title {
		width: 690rpx;
		margin: 0 auto;
		padding: 30rpx;
		font-size: 28rpx;
	}
	.contents-hb-list {
		width: 100%;
		position: relative;
		.contents-hb-list-img {
			position: absolute;
			top: 0;
			right: 0;
			width: 100rpx;
			z-index: 2;
		}
	}
</style>